import React from 'react'
import { Table,Card,Modal,Button,message } from 'antd'
import axios from './../../../axios/axios'


import './../../../style/ui.less'


export default class BasicTable extends React.Component{


    state={
        dataSource2:[]
    }

    componentWillMount(){

        this.request()
    }

    onRowClick = (record,index) => {
        let selectKey = [index]  // 此处表示有多个index ，单选的话就一个
        Modal.info({
            title:'信息',
            content:`用户名：${record.userName},用户爱好：${record.interest}`
        })
        this.setState({
            selectedRowKeys:selectKey,  // 更新选中的行
            // selectedItem: record
        })
    }

    handleDelete = () => {
        let rows = this.state.selectedRows
        let ids = []
        rows.map((item) => {
           return ids.push(item.id)
        })
        Modal.confirm({
            title:'删除提示',
            content:`删除的id集合:${ids.join(',')}`,
            onOk:() => {
                message.success('删除成功!')
                this.request()
            },
            onCancel:() => {
                message.info('取消删除')
            },
            okText:'确认',
            cancelText:'取消'
        })
    }

    request = () => {
        axios.ajax2({
            url:'/table/page',
            data:{
                // page:this.params.page
            }
        }).then((res) => {
            if (res.status === 200){
                // antd table 需要 key 没有会报错，那无影响
                res.data.map((item,index) => {
                    return item.key = index
                })
                this.setState({
                    dataSource2:res.data,
                    selectedRowKeys:[],
                    selectedRows:null
                })
            }
        })
    }


    render(){

        const selectedRowKeys = this.state.selectedRowKeys

        const rowSelection = {
            type:'radio',
            selectedRowKeys
        }

        const rowCheckSelection = {
            type: 'checkbox',
            selectedRowKeys,
            // 单选框也可以用onChange onRow 适合单选
            onChange:(selectedRowKeys,selectedRows)=>{
                this.setState({
                    selectedRowKeys,
                    selectedRows
                })
            }
        }

        const dataSource = [{
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号'
        }, {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号'
        }];

        const columns = [{
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        }, {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        }, {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        }];

        const columns2 = [
            {
                title:'id',
                key:'id',
                dataIndex:'id'
            },
            {
                title: '用户名',
                key: 'userName',
                dataIndex: 'userName'
            },
            {
                title: '性别',
                key: 'sex',
                dataIndex: 'sex',
                render(sex){
                    return sex ===1 ?'男':'女'
                }
            },
            {
                title: '状态',
                key: 'state',
                dataIndex: 'state',
                render(state){
                    let config  = {
                        '1':'失业',
                        '2':'工作',
                        '3':'创业'
                    }
                    return config[state];
                }
            },
            {
                title: '爱好',
                key: 'interest',
                dataIndex: 'interest',
                render(interest) {
                    let config = {
                        '1': '游泳',
                        '2': '打篮球',
                        '3': '踢足球',
                        '4': '跑步',
                        '5': '爬山'
                    }
                    return config[interest];
                }
            },
            {
                title: '生日',
                key: 'birthday',
                dataIndex: 'birthday'
            },
            {
                title: '地址',
                key: 'address',
                dataIndex: 'address'
            },
            {
                title: '早起时间',
                key: 'time',
                dataIndex: 'time'
            }
        ]

        return(
            <div>
                <Card title="基础表格" className="card-wrap">
                    <Table dataSource={dataSource} columns={columns} bordered/>
                </Card>

                <Card title="动态数据渲染表格-Mock" className="card-wrap">
                    <Table
                        columns={columns2}
                        dataSource={this.state.dataSource2}
                        pagination={false}
                    />
                </Card>

                <Card title="Mock-单选" className="card-wrap">
                    <Table
                        bordered
                        rowSelection={rowSelection}
                        onRow={(record,index) => {
                            return {
                                onClick: () => {
                                    this.onRowClick(record,index)
                                }     // 点击行
                            };
                        }}

                        columns={columns2}
                        dataSource={this.state.dataSource2}
                        pagination={false}
                    />
                </Card>

                <Card title="Mock-单选-删除" className="card-wrap">
                    <div style={{marginBottom:10}}>
                        <Button onClick={this.handleDelete}>删除</Button>
                    </div>
                    <Table
                        bordered
                        rowSelection={rowCheckSelection}
                        columns={columns2}
                        dataSource={this.state.dataSource2}
                        pagination={false}
                    />
                </Card>

                <Card title="Mock-分页" className="card-wrap">
                    <div style={{marginBottom:10}}>
                        <Button onClick={this.handleDelete}>删除</Button>
                    </div>
                    <Table
                        bordered
                        rowSelection={rowCheckSelection}
                        columns={columns2}
                        dataSource={this.state.dataSource2}
                        pagination={true}
                    />
                </Card>
            </div>
        )
    }
}